<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据融合平台</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/static/css/font.css">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/static/css/xadmin.css">
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/static/lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/static/js/xadmin.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/static/js/echarts.min.js"></script>
<style type="text/css">
.first {
	width: 100%;
	height: 400px;
	background: #E0E0E0;
	border-radius: 20px 20px 0 0;
	margin-bottom: 20px;
	color: #E0E0E0;
}

.firstbt {
	width: 100%;
	height: 50px;
	background: #28495a;
	border-radius: 20px 20px 0 0;
	padding-top: 10px;
}

.firstbtright {
	width: 100%;
	height: 40px;
	/* margin-left: 30%; */
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	float: left;
	font-weight: bold;
}

.xz {
	width: 100%;
	height: 760px;
	background: #E0E0E0;
	border-radius: 20px 20px 0 0;
}

.xz .bt {
	width: 100%;
	height: 50px;
	background: #ee5a14;
	border-radius: 20px 20px 0 0;
	padding-top: 10px;
	float: left;
}

.btleft {
	width: 50%;
	height: 40px;
	/* margin-left: 30%; */
	text-align: center;
	line-height: 40px;
	font-size: 20px;
	float: left;
}

.btright {
	width: 50%;
	height: 40px;
	margin-left: 0%;
	text-align: center;
	line-height: 40px;
	font-size: 20px;
	float: left;
}

.bt select {
	margin-top: -10px;
	height: 30px;
}

.first select {
	margin-top: -8px;
	height: 30px;
	font-weight: normal;
}

.two {
	width: 100%;
	float: left;
}

.three {
	width: 100%;
	float: left;
	margin-bottom: 50px;
}

.clubsweek {
	margin-top: 60px;
	width: 40%;
	height: 400px;
	background: red;
	float: left;
}
</style>
</head>

<body class="layui-anim layui-anim-up">
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">俱乐部</a>
			<a> <cite>体测数据</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<div class="first">
			<div class="firstbt">
				<div class="firstbtright">
					<div class="layui-input-inline">
						<select style="width:150px" id="yearTermId">
							<option value="">选择学期</option>
							<c:forEach items="${yearTermList}" var="y">
								<option ${y.id==yearTermId? "selected":""} value="${ y.id}">${y.year }${y.term==1?'第一学期':'第二学期' }</option>
							</c:forEach>
						</select>
					</div>
					<div style="width:150px" class="layui-input-inline" style="margin: 0 20px;">
						<select id="projectId">
							<option value="">选择项目</option>
							<c:forEach items="${projectList}" var="p">
								<option value="${ p.dwh}">${p.dwmc }</option>
							</c:forEach>
						</select>
					</div>
					所有俱乐部体质健康状态图
				</div>
			</div>
			<div id="cpjbdaynum"
				style="width: 100%; height: 300px; margin-bottom: 10px;"></div>
		</div>

		<div class="xz">
			<div class="bt">
				<div class="btleft">
					学期
					<div class="layui-input-inline">
						<select style="width:180px;" style="margin-left: 2%;" id="yearTermId1">
							<option value="">选择学期</option>
							<c:forEach items="${yearTermList}" var="yt">
								<option style="width:120px;" ${yt.id==yearTermId? "selected":""} value="${ yt.id}">${ yt.year}${yt.term==1?'第一学期':'第二学期' }</option>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="btright">
					俱乐部
					<div class="layui-input-inline">
						<select style="width:140px;" id="clubId" lay-filter="province">
							<c:forEach items="${clubList}" var="c">
								<option ${c.dwh==clubId? "selected":""} value="${ c.dwh}">${ c.dwmc}</option>
							</c:forEach>
						</select>
					</div>
				</div>
			</div>
			<div class="two">
				<div id="clubtijk"
					style="margin-top: 20px; width: 50%; height: 280px; float: left;"></div>
				<div id="cjhy"
					style="margin-top: 20px; width: 50%; height: 280px; float: left;"></div>
			</div>
			<div class="three">
				<div id="zjhy"
					style="margin-top: 60px; width: 50%; height: 280px; float: left;"></div>
				<div id="gjhy"
					style="margin-top: 60px; width: 50%; height: 280px; float: left;"></div>
			</div>
		</div>

	</div>
	<script>
    var clubId = "${clubId}";
    var clubList = [];
    var excellentList = [];
    var goodList = [];
    var passList = [];
    var failList = [];
    var yearTermId = $("#yearTermId").val();
    var projectId = $("#projectId").val();
    

    $("#yearTermId1").change(function(){
    	yearTermId1=$("#yearTermId1").val();
		changeClubInfo(yearTermId1);
	});
	function changeClubInfo(yearTermId1){
			var yearTermId1 = $("#yearTermId1").val();
			$("#clubId").empty();
			$.ajax({
				url : "<%=request.getContextPath()%>/sports/getClubList",
				type: "get",
				data: {"yearTermId":yearTermId1},
				dataType: "json",
				async: false,
				success: function(clubList){
					if(clubList.length>0 && clubList!=null){
						$.each(clubList, function(i, c){
							$("#clubId").append('<option value="' + c.dwh + '" ' + (clubId ==c.dwh ? 'selected':'') + '>' + c.dwmc + '</option>');
						});
					}else{
						$("#clubId").append('<option value="">本学期无俱乐部信息</option>');
					}
				},
				error : function() {
		            layer.alert('数据访问出错',{
		                icon:5});
				}
			});
		}
    	
        var gjhy = echarts.init(document.getElementById('gjhy'));   
        var zjhy = echarts.init(document.getElementById('zjhy'));       
        var cpjbdaynum = echarts.init(document.getElementById('cpjbdaynum'));
        var clubtijk = echarts.init(document.getElementById('clubtijk'));
        var cjhy = echarts.init(document.getElementById('cjhy'));
         
        //所有俱乐部体质健康状态图格式+json
        var seriescpjbdaynum=[];
        function getClubHealthByYearAndproject(){
        	yearTermId = $("#yearTermId").val();
        	projectId = $("#projectId").val();
        	 if(yearTermId!=null && yearTermId!=''){
     	        $.ajax({
     	            url:'<%=request.getContextPath()%>/stamina/getClubHealthByYearAndproject',
     	           data:{'yearTermId' : yearTermId, 'projectId' : projectId},
     	            dataType:'json',
     	            type:'get',
     	            async:false,  	
     	            success:function(result){
     	            	 clubList = [];
     	                 excellentList = [];
     	                 goodList = [];
     	                 passList = [];
     	                 failList = [];
     	                for(var i = 0; i < result.length; i++){
     	                	clubList.push(result[i].name);
     	                	excellentList.push(result[i].excellentNum);
     	                	goodList.push(result[i].goodNum);
     	                	passList.push(result[i].passNum);
     	                	failList.push(result[i].failNum);
     	                }
     	               seriescpjbdaynum=[];
     	               seriescpjbdaynum.push({
     	  				// name:[],
     	  				name: '优秀人数',
     	  				type : 'bar',
     	  				data : excellentList,
     	  			});
     	  			seriescpjbdaynum.push({
     	  				// name:[],
     	  				name: '良好人数',
     	  				type : 'bar',
     	  				data : goodList,
     	  			});
     	  			seriescpjbdaynum.push({
     	  				// name:[],
     	  				name: '及格人数',
     	  				type : 'bar',
     	  				data : passList,
     	  			});
     	  			seriescpjbdaynum.push({
     	  				// name:[],
     	  				name: '不及格人数',
     	  				type : 'bar',
     	  				data : failList,
     	  			});
     	  		 //所有俱乐部体制健康图+json
     	  		    cpjbdaynum.setOption({
     	  		          xAxis : [
     	  		              {
     	  		            	  data :clubList
     	  		              }
     	  		          ],
     	  		          series :seriescpjbdaynum
     	  		    });
     	            },
     	            error:function(result){
    		            layer.alert('数据访问出错',{
    		                icon:5});
     	            }
     	        });
             }
        	
        }
        $("#yearTermId").change(function(){
        	getClubHealthByYearAndproject();
        });
        
        $("#projectId").change(function(){
        	getClubHealthByYearAndproject();
        });
        $("#clubId").change(function(){
        	getClubHealthByYearClubId();
        });
        
        
        //查询单个俱乐部体测
        var clubname=[];
        var selectExcellent=[];
        var selectGood=[];
        var selectPass=[];
        var selectFail=[];
        function getClubHealthByYearClubId(){
        	 var year=$("#yearTermId1").val();
        	 var cludids=$("#clubId").val();
        	 $.ajax({
                 url:"<%=request.getContextPath()%>/stamina/getClubHealthByYearAndClubId",
                 data:{'yearTermId' : year, 'clubId' : cludids},
     			async : false,
     			type : 'get',
     			dataType : "json",
     			success : function(result) {	
     				 clubname=[];
                     selectExcellent=[];
         			 selectGood=[];
       				 selectPass=[];
       				 selectFail=[];
     				 for(var i = 0; i < result.length; i++){
     					//clubname.push(result[i].name);
     					//selectExcellent.push(result[i].excellentNum);
     					//selectGood.push(result[i].goodNum);
     					//selectPass.push(result[i].passNum);
     					//selectFail.push(result[i].failNum);
     					if(result[i].name=="初级会员"){
     						clubname[0]=result[i].name;
     						selectExcellent[0]=result[i].excellentNum;
     						selectGood[0]=result[i].goodNum;
     						selectPass[0]=result[i].passNum;
     						selectFail[0]=result[i].failNum;
     						console.log("1");
     					}
     					if(result[i].name=="中级会员"){
     						clubname[1]=result[i].name
     						selectExcellent[1]=result[i].excellentNum;
     						selectGood[1]=result[i].goodNum;
     						selectPass[1]=result[i].passNum;
     						selectFail[1]=result[i].failNum;
     						console.log("2");
     					}
     					if(result[i].name=="高级会员"){
     						clubname[2]=result[i].name
     						selectExcellent[2]=result[i].excellentNum;
     						selectGood[2]=result[i].goodNum;
     						selectPass[2]=result[i].passNum;
     						selectFail[2]=result[i].failNum;
     						console.log("3");
     					}
  	                }
     				 for(var i = 0; i < result.length; i++){
     					 console.log(clubname[i]);
     				 }
     		/* 		var clubname1=[];
     		        var selectExcellent1=[];
     		        var selectGood1=[];
     		        var selectPass1=[];
     		        var selectFail1=[];
     				for(var i=0;i<result.length;i++){
     					if()
     				} */
     				clubtijk = echarts.init(document.getElementById('clubtijk'));
     				clubtijk.setOption({
     				    xAxis : [
     				        {
     				            data :clubname,
     				        }
     				    ],
     				    series : [
     				        {
     				            name:'不及格',
     				            type:'bar',
     				            data:selectFail,
     				        },
     				        {
     				            name:'及格',
     				            type:'bar',
     				            data:selectPass,
     				        },
     				        {
     				            name:'良好',
     				            type:'bar',
     				            data:selectGood,
     				        },
     				        {
     				            name:'优秀',
     				            type:'bar',
     				            data:selectExcellent,
     				        },
     				    ]
     				});	
     				/* 初级会员数据 */
		            	for(var i=0 ; i<clubname.length ; i++){
		            		if(clubname[i]=="初级会员"){
		            			cjhy.setOption(
		         					    {
		         					        series : [
		         					            {
		         					                data:[
		         					                    {value:selectFail[i], name:'不及格'},
		         					                    {value:selectPass[i], name:'及格'},
		         					                    {value:selectGood[i], name:'良好'},
		         					                    {value:selectExcellent[i], name:'优秀'}
		         					                ],
		         					            }
		         					        ]
		         					    }
		         					);	
		            		}
		            	}
		            	/* 中级会员数据 */
		            	for(var i=0 ; i<clubname.length ; i++){
		            		if(clubname[i]=="中级会员"){
		            			zjhy.setOption(
		         					    {
		         					        series : [
		         					            {
		         					                data:[
		         					                    {value:selectFail[i], name:'不及格'},
		         					                    {value:selectPass[i], name:'及格'},
		         					                    {value:selectGood[i], name:'良好'},
		         					                    {value:selectExcellent[i], name:'优秀'}
		         					                ],
		         					            }
		         					        ]
		         					    }
		         					);	
		            		}
		            	}
		            	/* 高级会员数据 */
		            	for(var i=0 ; i<clubname.length ; i++){
		            		if(clubname[i]=="高级会员"){
		            			gjhy.setOption(
		         					    {
		         					        series : [
		         					            {
		         					                data:[
		         					                    {value:selectFail[i], name:'不及格'},
		         					                    {value:selectPass[i], name:'及格'},
		         					                    {value:selectGood[i], name:'良好'},
		         					                    {value:selectExcellent[i], name:'优秀'}
		         					                ],
		         					            }
		         					        ]
		         					    }
		         					);	
		            		}
		            	}
     			},
     			error : function() {
		            layer.alert('数据访问出错',{
		                icon:5});
     			}
     			});
        }
        
         // 显示标题，图例和空的坐标轴
   /* 所有俱乐部体质健康状态图格式 */
   cpjbdaynum.setOption({
	      color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
          grid:{
              x:40,
              y:40,
              x2:70,
              borderWidth:1
          },
          tooltip : {
              trigger: 'axis'
          },
          legend: {
              x:70,
              y:5,
          },
          dataZoom: [
              {
                  show: true,
                  realtime: true,
                  start: 0,
                  end: 100,
              },
              {
                  type: 'inside',
                  realtime: true,
                  start: 30,
                  end: 70,
              }
          ],
          toolbox: {
              show : true,
              orient:'vertical',
              feature : {
                  magicType : {show: true, type: ['line', 'bar']},
                  restore : {show: true},
                  saveAsImage : {show: true}
              },
              x:'right'
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  name:'俱乐部',
                  nameTextStyle:{
                    color:' #DC143C',

                  },
                  data :[]
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  name:'人数',
              }
          ],
          series : [
          ]
    });
   /* 俱乐部体质健康状态图格式 */
  clubtijk.setOption({
    title : {
        text: '俱乐部体质健康状态图',
         x:'center'
    },
    tooltip : {
        trigger: 'axis'
    },
    color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
    grid:{
        x:40,
        y:40,
        x2:70,
        borderWidth:1
    },
    legend: {
        orient:'vertical',
        x2:0,
        y:5,
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : [],
            name:'月份',
        }
    ],
    yAxis : [
        {
            type : 'value',
            name:'人数',
        }
    ],
    series : []
	}    
    );
  /* 初级会员格式 */
	cjhy.setOption(
	    {
	        title : {
	            text: '初级会员',
	            x:'center'
	        },
	        color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
	        tooltip : {
	            trigger: 'item',
	            formatter: "{a} <br/>{b} : {c} ({d}%)"
	        },
	        legend: {
	            orient:'vertical',
	            x2:20,
	            y:5,
	        },
	        series : [
	            {
	                name: '访问来源',
	                type: 'pie',
	                radius : '65%',
	                center: ['50%', '60%'],
	                data:[
	                ],
	                label: {
	                    normal: {
	                        show: true,
	                        formatter: "{b} : {d}%"
	                    },
	                    emphasis: {
	                        show: true,
	                        textStyle: {
	                            fontSize: '20',
	                            fontWeight: 'bold'
	                        }
	                    }
	                },
	                itemStyle: {
	                    emphasis: {
	                        shadowBlur: 10,
	                        shadowOffsetX: 0,
	                        shadowColor: 'rgba(0, 0, 0, 0.5)'
	                    }
	                }
	            }
	        ]
	    }
	);
	/* 中级会员格式 */
	zjhy.setOption(
	   {
	       title : {
	           text: '中级会员',
	           x:'center'
	       },
	       color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
	       tooltip : {
	           trigger: 'item',
	           formatter: "{a} <br/>{b} : {c} ({d}%)"
	       },
	       legend: {
	           orient:'vertical',
	           x2:20,
	           y:5,
	       },
	       series : [
	           {
	               name: '访问来源',
	               type: 'pie',
	               radius : '65%',
	               center: ['50%', '60%'],
	               data:[
	               ],
	               label: {
	                   normal: {
	                       show: true,
	                       formatter: "{b} : {d}%"
	                   },
	                   emphasis: {
	                       show: true,
	                       textStyle: {
	                           fontSize: '20',
	                           fontWeight: 'bold'
	                       }
	                   }
	               },
	               itemStyle: {
	                   emphasis: {
	                       shadowBlur: 10,
	                       shadowOffsetX: 0,
	                       shadowColor: 'rgba(0, 0, 0, 0.5)'
	                   }
	               }
	           }
	       ]
	   }
	);
	/* 高级会员格式 */
	gjhy.setOption(
	   {
	       title : {
	           text: '高级会员',
	           x:'center'
	       },
	       color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
	       tooltip : {
	           trigger: 'item',
	           formatter: "{a} <br/>{b} : {c} ({d}%)"
	       },
	       legend: {
	           orient:'vertical',
	           x2:20,
	           y:5,
	       },
	       series : [
	           {
	               name: '访问来源',
	               type: 'pie',
	               radius : '65%',
	               center: ['50%', '60%'],
	               data:[
	               ],
	               label: {
	                   normal: {
	                       show: true,
	                       formatter: "{b} : {d}%"
	                   },
	                   emphasis: {
	                       show: true,
	                       textStyle: {
	                           fontSize: '20',
	                           fontWeight: 'bold'
	                       }
	                   }
	               },
	               itemStyle: {
	                   emphasis: {
	                       shadowBlur: 10,
	                       shadowOffsetX: 0,
	                       shadowColor: 'rgba(0, 0, 0, 0.5)'
	                   }
	               }
	           }
	       ]
	   }
	);
	
	/* --------------------------数据操作开始-------------------------------------- */	
	getClubHealthByYearAndproject();
	getClubHealthByYearClubId();
    </script>
</body>

</html>